<%@ page language="java" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<meta charset="utf-8">
	<title>Hello MUI</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	
    <jsp:include page="/WEB-INF/jsp/common/head.jsp"></jsp:include>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/sfile/css/mui.min.css">
</head>

<body>
	<!--下拉刷新容器-->
	<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
		<div class="mui-scroll">
			<!--数据列表-->
			<ul class="mui-table-view mui-table-view-chevron">
				<li class="mui-table-view-cell">
					<a href="" class="mui-navigate-right">Item 1</a>
				</li>
				<li class="mui-table-view-cell">
					<a href="" class="mui-navigate-right">Item 2</a>
				</li>
				<li class="mui-table-view-cell">
					<a href="" class="mui-navigate-right">Item 3</a>
				</li>
				<li class="mui-table-view-cell">
					<a href="" class="mui-navigate-right">Item 4</a>
				</li>
				<li class="mui-table-view-cell">
					<a href="" class="mui-navigate-right">Item 5</a>
				</li>
			</ul>
		</div>
	</div>
</body>
<jsp:include page="/WEB-INF/jsp/common/foot.jsp"></jsp:include>
<script src="${pageContext.request.contextPath}/sfile/js/mui.min.js"></script>
<script>
	$(function() {
		mui.init({
			pullRefresh: {
				container: '#pullrefresh',
				down: {
					callback: pulldownRefresh
				},
				up: {
					contentrefresh: '正在加载...',
					callback: pullupRefresh
				}
			}
		});
		/**
		 * 下拉刷新具体业务实现
		 */
		function pulldownRefresh() {
			setTimeout(function() {
				var table = document.body.querySelector('.mui-table-view');
				var cells = document.body.querySelectorAll('.mui-table-view-cell');
				for (var i = cells.length, len = i + 3; i < len; i++) {
					var li = document.createElement('li');
					li.className = 'mui-table-view-cell';
					li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
					//下拉刷新，新纪录插到最前面；
					table.insertBefore(li, table.firstChild);
				}
				mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
			}, 1500);
		}
		var count = 0;
		/**
		 * 上拉加载具体业务实现
		 */
		function pullupRefresh() {
			setTimeout(function() {
				mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > 2)); //参数为true代表没有更多数据了。
				var table = document.body.querySelector('.mui-table-view');
				var cells = document.body.querySelectorAll('.mui-table-view-cell');
				for (var i = cells.length, len = i + 5; i < len; i++) {
					var li = document.createElement('li');
					li.className = 'mui-table-view-cell';
					li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
					table.appendChild(li);
				}
			}, 1500);
		}
	});
</script>
</html>
